class Enlarge
{
    // constructor(el)
    constructor(el, options = {maskBg: 'yellow'})
    {
        
        
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.options = options 
        this.liObjs = this.el.querySelectorAll('ul li')
  
        this.init()
    }
    
    init() {

        this.config()
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
        this.smallimg()
        
 
    }

    config() {
        this.maskObj.style.background = this.options.maskBg
    }





    
    overOut() { 


        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
    }

    //移动
    maskMove()
    {
      
        this.imgObj.onmousemove = (evt) => { 
            let e = evt || window.event
          
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2

            if (left<0) left = 0
            if (top<0) top = 0
            let maxLeft = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxTop = this.imgObj.clientHeight - this.maskObj.offsetHeight
            if (left>maxLeft) left = maxLeft
            if (top>maxTop) top = maxTop

            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            
            this.enlargeSetBg(left, top)
        }
    }



    enlargeSetBg(left, top) 
    {
       
        let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
 
        let enlargeBgW = parseInt( enlargeBgSize[0])
        let enlargeBgH = parseInt( enlargeBgSize[1])

        let imgW = parseInt(this.getStyle(this.imgObj, 'width'))
        let imgH =  parseInt(this.getStyle(this.imgObj, 'height'))


        let x = left * (enlargeBgW/imgW)
        let y = top * (enlargeBgH/imgH)

        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }





    getStyle(tagObj, cssAttr)
    {
        
        return window.getComputedStyle ? window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr] 
    }

    enlargeSetWH()
    {
 
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH =  parseInt(this.getStyle(this.maskObj, 'height'))



        let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')

        let enlargeBgW = parseInt( enlargeBgSize[0])
        let enlargeBgH = parseInt( enlargeBgSize[1])


        let imgW = parseInt(this.getStyle(this.imgObj, 'width'))
        let imgH =  parseInt(this.getStyle(this.imgObj, 'height'))

        let w =  maskW * (enlargeBgW / imgW )
        let h =  maskH * (enlargeBgH / imgH )
        this.enlargeObj.style.width = w +'px'
        this.enlargeObj.style.height = h +'px'

    }




    smallimg()
    {

   
       this.liObjs.forEach((item,i)=>{

            item.onclick=()=>{
                
                this.el.querySelector('ul li.active').className = ''
               
                item.className = 'active'

                this.imgObj.style.backgroundImage=`url(./imgs/${i+1}.jpg) `
                this.enlargeObj.style.backgroundImage= `url(./imgs/${i+1}.big.jpg) `

            }

        })

    }




}
